// Copyright (c) 2016 Chef Software Inc. and/or applicable contributors
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

@import "mixins";
@import "bourbon";
@import "base/base";
@import "neat";
@import "octicons.scss";

@import "checking-input";
@import "drop-down";
@import "item-list";
@import "spinner";
@import "tabs";

@import "explore-page/explore-page";
@import "footer/footer";
@import "github-repo-picker/github-repo-picker";
@import "header/header";
@import "header/user-nav/user-nav";
@import "notifications/notifications";
@import "origin-create-page/origin-create-page";
@import "origin-page/origin-page";
@import "organization-create-page/organization-create-page";
@import "organization-members/organization-members";
@import "organizations-page/organizations-page";
@import "package-page/package-page";
@import "packages-page/packages-page";
@import "project-create-page/project-create-page";
@import "project-page/project-page";
@import "projects-page/projects-page";
@import "side-nav/origin-picker";
@import "side-nav/side-nav";
@import "sign-in-page/sign-in-page";

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: $off-white;
  margin: 0;
}

.hab-topbar {
  @include background(url("/assets/images/bg-pattern.png"), linear-gradient(205deg, #484846 15%, #323330 100%), center);
  background-color: $hab-orange;
  box-shadow: 1px 0 14px 0 $medium-gray;
  height: 80px;
  position: relative;
  z-index: 100;
}

.hab-container {
  @include outer-container;
  max-width: rem(1200);
  min-height: 70vh;
}

.hab-main {
  @include span-columns(10);
  background-color: $white;
  border-radius: 0 0 $global-radius $global-radius;
  height: 100%;
  position: relative;
  z-index: 50;

  &.centered {
    @include media($medium-screen) {
      @include span-columns(6);
      @include shift(3);
      margin-top: rem(20);
    }

    @include span-columns(12);
  }
}

.page-title {
  @include linear-gradient(205deg, #e9f1f7 5%, #dce6ed 100%);
  padding: rem(16) rem(20);
  position: relative;

  a {
    &.create {
      @include hab-button;
      margin-bottom: 0.5em;
      margin-top: 1.5em;
    }
  }

  p {
    color: $dark-gray;
    margin-top: rem(20);
    max-width: 32em;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.page-body {
  min-height: 50vh;
  padding: rem(30) rem(20);

  &.has-sidebar {
    @include outer-container;
  }

  .hero {
    p {
      margin-bottom: rem(15);
      text-align: center;
    }
  }

  .hab-sign-in & {
    min-height: inherit;
  }
}

.page-body--main {
  @include span-columns(8);
  word-wrap: break-word;
}

.page-body--sidebar {
  @include span-columns(4);
  @include omega;
  border-left: 1px solid $light-gray;
  padding-left: $base-spacing;
  word-wrap: break-word;
}
